<template lang="html">
  <div class="pb" :class='{pbReduce:isPb}'>
    <lawyer-bar />
    <lawyer-head isAct='isAct'/>
    <div class="layBanner2">
      <div class="info1">
        <div class="photo">
          <img :src=detail.img_detail alt="">
        </div>
        <div class="info">
          <p class="name">{{detail.name}}</p>
          <p class="company">{{detail.company}}</p>
          <p class="btn"><a href="javascript:void(0);" @click="dialogVisible = true">立即约见</a></p>
          <p class="scan">
            <i class="icon icon-scan"></i>浏览人数：{{detail.scan_num}}人
            <i class="icon icon-share"></i>分享：
            <a href="#" class="weibo"></a>
            <a href="#" class="wechat"></a>
          </p>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            size="tiny"
            :before-close="handleClose">
            <div class="dia-con">
              <div class="dia-tit">
                立即约见
              </div>
              <ul class="overhide">
                <li>
                  <i class="icon company ver-middle"></i>
                  <input type="text" placeholder="公司名称">
                </li>
                <li>
                  <i class="icon man ver-middle"></i>
                  <input type="text" placeholder="联系人">
                </li>
                <li>
                  <i class="icon tel ver-middle"></i>
                  <input type="text" placeholder="联系电话">
                </li>
                <li>
                  <i class="icon pos ver-middle"></i>
                  <input type="text" placeholder="公司职务">
                </li>
              </ul>
              <el-button type="warning" class="sub-btn">提 交</el-button>
            </div>
          </el-dialog>
      </div>
      <div class="info2 w1200">
        <div class="info info-left">
          <i class="icon icon-time"></i>从业年限：{{detail.work_year}}
        </div>
        <div class="info">
          常驻城市：<i class="icon icon-city"></i>{{detail.work_city}}
        </div>
        <p><i class="icon icon-bag"></i>擅长领域：{{detail.good_area}}</p>
      </div>
    </div>
    <div class="recommand">
      <p v-if="detail.reason==undefined"><i class="icon reason"></i>推荐理由：“{{detail.name+'律师来自'+detail.company+'，擅长'+detail.good_area}}”</p>
      <p v-else-if="detail.reason==''"><i class="icon reason"></i>推荐理由：“{{detail.name+'律师来自'+detail.company+'，擅长'+detail.good_area}}”</p>
      <p v-else><i class="icon reason"></i>推荐理由：“{{detail.reason}}”</p>
    </div>
    <div class="layerIntro">
      <div class="w1200 overhide">
        <p class="pos">您的位置：律师名人堂 > {{detail.name}}</p>
        <div class="left fl">
          <p class="title">{{detail.name}}简介：</p>
          <p v-for='intro_list in detail.intro'>{{intro_list}}</p>
          <p class="title exam">代表案例：</p>
          <p v-for='item in detail.case'>• {{item.case_list}}</p>
        </div>
        <div class="right fr">
          <p class="title">
            <span style="margin-right:11px;"></span> 专注优质法律服务 <span style="margin-left:11px;"></span>
          </p>
          <div class="goodLay">
            <div class="list">
              <ul>
                <li>
                  <div class="top">
                    <p class="tit">法律咨询</p>
                    <p class="txt">（排忧解惑  提供行动建议）</p>
                  </div>
                  <a href="#">
                    <div class="mid info">
                      <img src="../../assets/images/legalServe-icon1.png" alt="">
                      <p class="tit">在线咨询</p>
                      <p class="txt">免费咨询，优质体验</p>
                    </div>
                  </a>
                  <a href="#">
                    <div class="bot info">
                      <img src="../../assets/images/legalServe-icon2.png" alt="">
                      <p class="tit">电话咨询</p>
                      <p class="txt">及时响应，沟通高效， 高性价比</p>
                    </div>
                  </a>
                </li>
                <li>
                  <div class="top">
                    <p class="tit">纠纷解决</p>
                    <p class="txt">（简单经济  不诉讼解决纠纷）</p>
                  </div>
                  <a href="#">
                    <div class="mid info">
                      <img src="../../assets/images/legalServe-icon3.png" alt="">
                      <p class="tit">律师函</p>
                      <p class="txt">向对方提出严正警告， 促成纠纷解决</p>
                    </div>
                  </a>
                  <a href="#">
                    <div class="bot info">
                      <img src="../../assets/images/legalServe-icon4.png" alt="">
                      <p class="tit">纠纷调解</p>
                      <p class="txt">不诉讼解决纠纷，省钱 省事不伤和气</p>
                    </div>
                  </a>
                </li>
                <li>
                  <div class="top">
                    <p class="tit">诉讼官司</p>
                    <p class="txt">（（司法程序 裁决、判决）</p>
                  </div>
                  <a href="#">
                    <div class="mid info">
                      <img src="../../assets/images/legalServe-icon5.png" alt="">
                      <p class="tit">律师诉讼</p>
                      <p class="txt">找名人律师 最大化你的 权益</p>
                    </div>
                  </a>
                  <a href="#">
                    <div class="bot info">
                      <img src="../../assets/images/legalServe-icon6.png" alt="">
                      <p class="tit">自助诉讼</p>
                      <p class="txt">撰写法律文书、查档不 再麻烦</p>
                    </div>
                  </a>
                </li>
                <li>
                  <div class="top">
                    <p class="tit">法律参谋</p>
                    <p class="txt">（预防风险，领导者的外脑）</p>
                  </div>
                  <a href="#">
                    <div class="mid info">
                      <img src="../../assets/images/legalServe-icon7.png" alt="">
                      <p class="tit">法律顾问</p>
                      <p class="txt">全所服务，提供全面、 准确的法律体检 </p>
                    </div>
                  </a>
                  <a href="#">
                    <div class="bot info">
                      <img src="../../assets/images/legalServe-icon8.png" alt="" style="left:20px;">
                      <p class="tit">法律培训</p>
                      <p class="txt">小范围、私密性法律课 程，建立法律实操方法</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <lawyer-footer></lawyer-footer>
  </div>
</template>

<script>
import axios from 'axios'
import lawyerheader from '../header/lawyer-header.vue'
import lawyerfooter from '../footer/footer.vue'
import lawyerBar from '../header/topbar.vue'
export default {
  data() {
    return {
      detail:{},lawyer:[],isPb:false,isAct:true,
      dialogVisible: false
    }
  },
  methods:{
    loadLawyer:function(index){
      let id = this.$route.params.id;
      // console.log(id);
      axios.get('http://cms.xinggeweb.com/api/action/article?version=1.0.1&apiNo=1000000&time=20170314160401&apiUser=lawyer_api&checkSum=YBrs&p={articleId:'+id+'}')
      .then((response) => {
        console.log(response);
        let lawDetail=response.data.data.article.json_data;
        this.detail=lawDetail;
        // console.log(this.detail.reason);
        // 案例json字符串转为对象
        let caseStr=JSON.parse(this.detail.case);
        this.detail.case=caseStr;
        // 字符串换行
        let introArr=this.detail.intro.split('\\n');
        this.detail.intro=introArr;
      })
      .catch((error) => {
        console.log(error);
      })
    },
    headerReduce:function(){
      var top=document.body.scrollTop;
      if(top>0){
        this.isPb=true
      }else{
        this.isPb=false
      }
    },
    // 弹窗
    handleClose(done) {
      done();
    },
  },
  mounted(){
    window.addEventListener('scroll',this.headerReduce)
  },
  activated(){
    this.loadLawyer();
    document.title='名人堂-律师详情'
  },
  components:{
    'lawyer-head':lawyerheader,
    'lawyer-footer':lawyerfooter,
    lawyerBar
  }
}
</script>

<style lang="less">
@import 'lawyer.less';
</style>../../assets/
